<template>
	<view class="cu-modal" :class="modalName=='channelsModal'?'show':''" @touchmove.stop.prevent="()=>{return}" @tap="hideModal">
		<view class="cu-dialog" @tap.stop> 
			<view class="cu-bar bg-primary justify-end text-white">
				<view class="content">{{$t('JLink.deviceMessage.channels.title')}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-white"></text>
				</view>
			</view>
			<view class="padding-top text-left">
				<scroll-view scroll-y :scroll-top="0" class="indexes" :scroll-with-animation="true" :enable-back-to-top="true"
					:style="[{height:'calc(100vh - 300upx)'}]">
					<view v-for="(item,i) in message.channelsArr" :key="i"  class="cu-list menu card-menu sm-border borders" @tap="jumpBuy(item)">
						<view class="cu-item bg-white devices">
							<view class="content padding-tb-sm">
								<!-- 通道 -->
								<view>
									{{item.chnId+1}}
									<text v-if="localeLang==='en'">&nbsp;</text>
									<view style="display: inline-block;">
										<text v-if="item.chnId==0">{{$t('JLink.order.list.message.channel')}}</text>
										<text v-else>{{$t('JLink.order.list.message.channels')}}</text>
									</view>
								</view>
								<view class="text-sm">
									<!-- 已购买 -->
									<view v-if="item.expireTime.time" class=" text-gray">
										<view>
											<!-- 已到期，点击续费 -->
											<text v-if="item.expireTime.color==='reds'" class="text-reds">{{$t('JLink.deviceMessage.expire')}}</text>
											<!-- 正常使用 -->
											<text v-else class="text-primary">{{$t('JLink.deviceMessage.inNormal')}}</text>
										</view>
										<view>{{$t('JLink.publicText.expiration')}}:{{item.expireTime.time}}</view>
									</view>
									<!-- 未开通 -->
									<view v-else class="text-gray">{{$t('JLink.deviceMessage.unBuy')}}</view>
								</view>
							</view>
							<view class="action">
								<view v-if="item.expireTime.time">
									<!-- 续费 -->
									<button v-if="item.expireTime.color=='reds'" class="cu-btn round line-red text-sm">{{$t('JLink.publicText.renewal')}}</button>
									<!-- 查看 -->
									<button v-else class="cu-btn round line-primary text-sm" >{{$t('JLink.deviceMessage.Check')}}</button>
								</view>
								<view v-else>
									<!-- 去开通 -->
									<button class="cu-btn round line-black text-sm">{{$t('JLink.deviceMessage.open')}}</button>
								</view>
							</view>
						</view>
					</view>
					<!-- 云存储最大支持路数 -->
					<view class="text-center padding-tb text-grey">{{$t('JLink.deviceMessage.channels.inform')}} ({{message['xmc.css.maxchannel']}})</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		modalName:{
			type:String,
			default:''
		},
		info:{//兼容模态框
			type:Object,
			default:()=>{	
				return {}
			}
		}
	},
	data() {
	  return {
		  	message:{},//内容
		  	localeLang:'zh'
	  }
	},
	methods: {
	    jumpBuy (item){
			uni.hideToast();
			const { chnId, expireTime} = item;
			const { classifyId, sn,normalUseChannel } = state.message;
			let maxChannel = state.message['xmc.css.maxchannel'];//云存储能使用的最大通道数
			let jumpUrl = ()=> this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}&channel=${chnId}`);
			if(normalUseChannel>=maxChannel){//使用中的通道数大于等于最大通道数
				if(expireTime.time&&expireTime.color!='reds'){
					jumpUrl();
				}else{
					uni.showToast({
						title: this.$t('JLink.deviceMessage.channels.introduce'),
						icon:'none'
					});
				}
			}else{
				jumpUrl();
			}
		},
		// 取消事件
		hideModal (){
			this.$emit('hideModal')
		}
	},
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
